<template>
  <div style="height: 100%;" class="content">
    <div class="top-bar">
      <div :class="{'bar-item': true, active: type === '1'}" @click="getTeacher">
        <span>收到通知</span>
        <span class="bottom-line"></span>
      </div>
      <div :class="{'bar-item': true, active: type === '2'}" @click="getStudent">
        <span>发出通知</span>
        <span class="bottom-line"></span>
      </div>
      <div class="message" style="width: 20px;">
        <router-link to="/message/send">
          <img src="@/assets/img/icon-plus.png" alt="" width="20px">
        </router-link>
      </div>
    </div>
    <message-list :messages="messages"/>
  </div>
</template>

<script>
import messageList from '@/components/messageList'
import api from '@/api'
import {datetimeFormat} from '@/utils'
export default {
  name: 'course-message',
  data () {
    return {
      receiveMessage: [],
      sendMessage: [],
      messages: [],
      type: '1'
    }
  },
  methods: {
    // teacherMessagManagement
    select () {
      let params = {
        // id: 1,
        id: JSON.parse(sessionStorage.getItem('user')).id,
        type: '1'
      }
      api.teacherMessagManagement({
        params,
        callback: res => {
          this.messages = res.data.data
        }
      })
    },
    getSend () {
      api.teacherSendMessage({
        params: {id: JSON.parse(sessionStorage.getItem('user')).id},
        callback: res => {
          if (res.data.error_code === 0) {
            res.data.data.forEach(item => {
              item.releasetime = datetimeFormat(new Date(Number(item.releasetime) * 1000))
            })
            this.messages = res.data.data
          }
        }
      })
    },
    getTeacher () {
      this.type = '1'
      this.select()
    },
    getStudent () {
      this.type = '2'
      this.getSend()
    }
  },
  components: {
    messageList
  },
  created () {
    this.select()
  }
}
</script>

<style scoped>
  .top-bar{
    font-family: PingFangBlod;
    color: #1E1E1E;
    display: flex;
    align-items: center;
    padding: 10px 16px;
    box-shadow:0px 3px 6px rgba(0,0,0,0.16);
    font-size: 18px;
  }
  .top-bar .bar-item{
    flex-grow: 1;
    flex-shrink: 1;
    text-align: center;
    position: relative;
  }
  .top-bar .bar-item:nth-child(1){
    border-right: 1px solid #707070;
  }
  .top-bar .bar-item.active{
    color: #3A7FE2;
  }
  .bar-item.active .bottom-line{
    position: absolute;
    display: inline-block;
    height: 3px;
    width: 50px;
    background-color: #3a7fe2;
    bottom: -10px;
    left: 50%;
    margin-left: -25px;
  }
  .top-bar .message{
    flex-grow: 0;
    flex-shrink: 0;
  }
  .top-bar .message img{
    display: block;
  }
  .content .container{
    height: calc(100% - 46px);
  }
</style>
